<template>
  <div>
    <el-container>
      <el-header>
        <h1>后台管理系统</h1>
        <el-button type="info" @click="quit">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="collapse?'50px':'200px'">
          <p class="inco"><i class="el-icon-s-operation" @click="collapse=!collapse"></i></p>
          <el-menu :collapse="collapse" router unique-opened :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu :index="item.path" v-for="item in menusList" :key="item.id">
              <template slot="title">{{ item.authName }}</template>
              <el-menu-item :index="'/'+ele.path" v-for="ele in item.children">{{ ele.authName }}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb> -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getmenus } from "../utils/api"
export default {
  data() {
    return {
      menusList: [],//侧边导航栏数据
      collapse:false
    }
  },
  methods: {
    // 退出登录
    quit() {
      this.$confirm('您确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem("token")
        this.$router.push("/login")
      }).catch(() => {
        return
      });
    },

  },
  created() {
    //请求侧边导航栏接口
    getmenus().then(res => {
      console.log(res);
      this.menusList = res.data
      localStorage.setItem("menus",JSON.stringify(res.data))
    })
  },
  mounted() {

  },
  components: {

  },
  computed: {

  },
  watch: {

  },
}
</script>

<style lang='scss' scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  height: 90vh;

  .inco {
    width: 100%;
    height: 30px;
    background-color: #4a5064;
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  height: 90vh;
}
</style>
